<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vw和vh</title>
    <style>
      div {
        width: 10vw;
        height: 10vw;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <!-- 
        主要适合移动端
        vw/vh 是一个相对单位(类似em 和 rem相对单位)
            vw是：viewport width 视口宽度单位
            vh是: viewport height 视口高度单位
        相对视口的尺寸计算结果：
            1vw = 1 / 100 视口宽度
            1vh = 1 / 100 视口高度
        和百分比区别是，百分比是相对于父元素来说的，而 vw 和 vh是针对当前视口来说的

     -->
    <div></div>
  </body>
</html>
